
<template>
    <div class="cover-box">
        <div class="content-show" v-bind:style="cssStyle()">
            <div class="hd">
                {{config.title}}
                <div class="btns">
                    <i class="fa fa-times pull-right fa-2x close" title="关闭" v-on:click="close()"></i>
                </div>
            </div>
            <div class="bd">
                <div class="content">
                    <div class="user">
                        <img :src="content.avatar" />
                        <p>{{content.buyer_nick}}</p>
                    </div>
                    <div class="content-bd">
                        <div class="description">{{content.description}}</div>
                        <div class="content_imgs">
                            <!--<div class="content_img" v-for="img in JSON.parse(content.pic_meta)" :style="{'background-image': 'url('+img.pic+')'}"></div>-->
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide content_img" v-for="img in JSON.parse(content.pic_meta)" :style="{'background-image': 'url('+img.pic+')'}"></div>
                                </div>
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ft">
                <button class="cancelbtn" v-on:click="close()">关闭</button>
            </div>
        </div>
    </div>
</template>


<script>
    import fn from 'admin/js/common/function.js';

    export default {
        data: function(){
            return {
                config: {
                    title: '请稍等...',
                    content: '',
                    style: {
                        left: 100,
                        top: 30,
                        width: 150,
                        height: 'auto'
                    },
                    customClass: ''	//自定义样式
                }
            }
        },
        methods: {
            cssStyle(){
                return fn.makeStyle(this.config.style);
                //return null;
            },
            close(){
                $('.cover-box').remove();
            },

        },
        created (){
            var self = this;

            this.$nextTick(function(){
                $.extend(true,self.$data, self.temp);

                var mySwiper = new Swiper('.swiper-container',{
                    slidesPerView : 5,
                    spaceBetween : 10,

                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                })
            })

        },
        components: {
        }
    }
</script>

<style lang="less">
    .cover-box {
        position: fixed;
        width:100%;
        height: 100%;
        z-index: 200;
        background-color: rgba(0,0,0,0.5);

        .content-show {
            top:10px;
            _position:absolute;
            min-height:50px;
            _height:50px;
            opacity: 0.9;
            background-color: #ccc;
            border-radius: 4px;
            margin: 30px auto;

        input {
            width: 100px;
        }

        hr {
            margin: 10px 0;
            border: 0;
            border-top: 1px solid #242424;
            border-bottom: 1px solid #404040;
        }

        .hd {
            display: flex;
            justify-content:  space-between;
            height:30px;
            line-height: 30px;
            vertical-align: middle;
            padding:0 5px;
            border-bottom: 1px solid #242424;
            border-bottom: 1px solid rgba(0, 0, 0, 0.4);
        }

        .bd {
            padding: 10px 20px;
            box-shadow: inset 0 1px 0 rgba(245, 245, 255, 0.05);
            min-height: 30px;
            max-height: 670px !important;
            overflow: hidden;

            .user {
                padding: 3px 3px;
                text-align: center;

                img{
                    width: 40px;
                    height: 40px;
                }

                p{
                    height: 20px;
                    line-height: 20px;
                }
            }
            .content-bd {
                line-height: 20px;
                overflow: hidden;
                border: 1px solid #999;
                border-radius: 4px;
                padding: 10px;

                .content_imgs {
                    padding-top: 20px;


                    .swiper-container {
                        width: 840px;
                        height: 160px;

                        .content_img {
                            width: 160px;
                            height: 160px;
                            background-repeat: no-repeat;
                            background-size: 100% auto;
                            overflow: hidden;
                            display: block;
                            background-color: #fff;
                            background-position: center;
                        }

                        .swiper-button-prev {
                            display: none;
                            width: 10px;
                            left: 0;
                            background-size: 10px 44px;
                            background-color: rgba(255, 255, 255, 0.5);
                        }

                        .swiper-button-next {
                            display: none;
                            width: 10px;
                            right: 0;
                            background-size: 10px 44px;
                            background-color: rgba(255, 255, 255, 0.5);
                        }

                        &:hover {

                            .swiper-button-prev,
                            .swiper-button-next {
                                display: block;
                            }

                            }
                        }
                    }
            }

        }

        .ft {
            vertical-align: middle;
            padding:2px 5px;
            text-align: center;
            border-top: 1px solid #242424;
            border-top: 1px solid rgba(0, 0, 0, 0.4);
        }


        }
    }

</style>
